import React,  { Component } from 'react';
import axios from 'axios';
import cookie from 'react-cookies';
import MenuHead from '../comm/menuHead';
import Table from '../comm/table';
import '../comm/comm.css';

class Pwd extends Component {
    state = {
        pwd_head: [
            {"en": "id", "ch": "id"},
            {"en": "pwd", "ch": "pwd"}
        ],
        pwd: [],
        record_count: 0,
        pwd_id: "",
        restart_query: false,
        error: "",
    }
    set_pwd_id = (e) => {
        this.setState({
            pwd_id: e.target.value,
            restart_query: true,
        })
    }
    queryPwd = (from, page) => {
        let userName = cookie.load('login-name');
        let loginID = cookie.load('login-id');
        if(true === this.state.restart_query) {
            from = 0
            page = 10
        }
        axios.post("/app/queryPwd", {
            "pwdId": this.state.pwd_id,
            "from": from,
            "page": page,
            "username": userName,
            "loginID": loginID,
        }).then((res) => {
            if("请先登录" === res.data.error) {
                this.props.history.push('/login');
            } else{
                let pwd_list = null === res.data.pwd ? [] : res.data.pwd
                this.setState({
                    pwd: pwd_list,
                    record_count: res.data.count,
                    restart_query: false,
                    error: res.data.error,
                })
            }
        }).catch((err) => {
            this.setState({error: "请求服务器端时产生的错误信息: " + err})
        })
    }
    render() {
        return (
            <div align="center">
                <MenuHead />
                <h4>pwd查询</h4>
                <table>
                <tbody>
                <tr>
                    <td><input
                        value={this.state.pwd_id}
                        onChange={this.set_pwd_id}
                        type="text" size="10" maxLength="10"></input></td>
                </tr>
                <tr>
                    <td>
                        { "" !== this.state.error ?
                            <span><font color="#FF0000">{this.state.error}</font></span> :
                            <div></div> }
                    </td>
                </tr>
                </tbody>
                </table>
                <Table
                    head={this.state.pwd_head}
                    data={this.state.pwd}
                    recordCount={this.state.record_count}
                    queryData={this.queryPwd}
                    restartQuery = {this.state.restart_query} />
            </div>
        )
    }
}

export default Pwd;
